<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>百日无违章报名</title>
    <link rel="stylesheet" href="../../../resource/js/layer/2.4/skin/layer.css">
    <link rel="stylesheet" href="../../../resource/css/style.css">
    <link rel="stylesheet" href="../../../resource/js/webuploader/bairiwebuploader.css">
</head>
<style>
    .a-table{
        margin: 0 auto;
        width: 90%;
        padding: 1rem ;
    }
    .a-tr{
        height:1.3rem;
        border-bottom: 0.5px solid #e4e4e4;
        display: block;
        padding: 1rem 0.5rem 1.5rem 0.5rem;
    }
    .a-td{
        padding: 0.2rem 0.5rem 0 0;
        width: 10%;
        height:0.9rem ;
        border-right: 2px solid #1296db;
    }
    .input-on{
        margin: 0 0 0 1rem;
        width: 100%;
        height:1.5rem;
        border: none;
        outline:none;
        font-size: 15px;
    }
    button{
        width: 80%;
        margin-left: 10%;
        height: 2rem;
        border-radius: 5px;
        border: 1px solid #3598db;
        font-size: 16px;
        outline: none;
    }
    .enroll{
        background-color: #3598db;
        color: #fff;
    }
    .return{
        background-color: #fff;
        color: #3598db;
        margin-top: 1rem;
    }
    text{
        color:#7d7d7d;
        margin-left: 1rem
    }
    select{
        border:none;
        /*appearance:none;*/
        /*-moz-appearance:none;*/
        /*-webkit-appearance:none;*/
        /*-ms-appearance:none;*/
        width:2.5rem;
        height: 100%;
        background:#fff;
        color:#666;
        margin-left:1rem ;
        outline:none;
        font-size: 15px;
    }
    .sex{
        margin-left: 1rem;
    }
    #alertyes{
        display:none;
        width: 100%;
        height: 6.2rem;
        border-radius: 1rem;
        margin: 0 auto;
    }
    #alertyes div {
        margin: 0;
        width: 100%;
        height: 40%;
        border-bottom: 1px solid #dcdcdc;
        padding-top: 1.5rem;
    }
    #alertyes div span{
        margin: .5rem 1rem;
        font-size: 16px;
    }
    #alertyes button{
        width: 50%;
        background-color: #fff;
        color: #3598db;
        float: left;
        margin: 0;
        border: none;
        border-radius: 0;
    }


    #alertreturn{
        display:none;
        width: 100%;
        height: 6.2rem;
        border-radius: 1rem;
        margin: 0 auto;
    }
    #alertreturn div {
        margin: 0;
        width: 100%;
        height: 40%;
        border-bottom: 1px solid #dcdcdc;
        padding-top: 1.5rem;
    }
    #alertreturn div span{
        margin: .5rem 1rem;
        font-size: 16px;
    }
    #alertreturn button{
          width: 100%;
          background-color: #fff;
          color: #3598db;
          float: left;
          margin: 0;
          border: none;
          border-radius: 0;
      }

    #alertmsg{
        display:none;
        width: 100%;
        height: 6.2rem;
        border-radius: 1rem;
        margin: 0 auto;
    }
    #alertmsg div {
        margin: 0;
        width: 100%;
        height: 40%;
        border-bottom: 1px solid #dcdcdc;
        padding-top: 1.5rem;
    }
    #alertmsg div span{
        margin: .5rem 1rem;
        font-size: 16px;
    }
    #alertmsg button{
        width: 100%;
        background-color: #fff;
        color: #3598db;
        float: left;
        margin: 0;
        border: none;
        border-radius: 0;
    }
    .picker-img{
        height: 90px;
        padding: 0.2rem 0.5rem 0 0;
        margin-bottom: 0.5rem;
    }
    #picker{
        border: 1px solid #dcdcdc;
        width: 50%;
        height: 70px;
        margin-left: 1rem;
    }
</style>
<body>
<div style="height: 5rem"> </div>
<form action="" method="post" id="enrollform">
    <table class="a-table">
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/img/func.png" height="25" width="25"/></td>
            <td>
                <select class="layui-anim-fadein" id="area">
                    <option selected="selected">鲁</option>
                    <option value="京">京</option>
                    <option value="津">津</option>
                    <option value="沪">沪</option>
                    <option value="渝">渝</option>
                    <option value="冀">冀</option>
                    <option value="豫">豫</option>
                    <option value="云">云</option>
                    <option value="辽">辽</option>
                    <option value="黑">黑</option>
                    <option value="湘">湘</option>
                    <option value="皖">皖</option>
                    <option value="新">新</option>
                    <option value="苏">苏</option>
                    <option value="浙">浙</option>
                    <option value="赣">赣</option>
                    <option value="晋">晋</option>
                    <option value="蒙">蒙</option>
                    <option value="陕">陕</option>
                    <option value="陕">陕</option>
                    <option value="吉">吉</option>
                    <option value="闽">闽</option>
                    <option value="贵">贵</option>
                    <option value="粤">粤</option>
                    <option value="青">青</option>
                    <option value="藏">藏</option>
                    <option value="川">川</option>
                    <option value="宁">宁</option>
                    <option value="琼">琼</option>
                </select>
            </td>
            <td><input name="car_number" id="car-number" class="input-on" style="margin-left: 0;" type="text" placeholder="请输入车牌号"></td>
        </tr>
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/violation/person.png" height="25" width="25"/></td>
            <td><input name="user_name" class="input-on" type="text" placeholder="请输入姓名"></td>
        </tr>
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/violation/sex.png" height="25" width="25"/></td>
            <td><input id="man" class="sex" type="radio" checked="checked" name="sex" value="男" />男<input id="woman" type="radio" class="sex"  name="sex" value="女" />女</td>
        </tr>
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/violation/phone.png" height="25" width="25"/></td>
            <td><input name="phone" class="input-on" type="number" placeholder="请输入手机号"></td>
        </tr>
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/violation/car_num.png" height="25" width="25"/></td>
            <td><input name="ID_card" class="input-on" type="text" placeholder="请输入身份证号"></td>
        </tr>
        <!--上传驾驶证照片-->
        <tr class="a-tr" style="height: 80px">
            <td class="a-td"><img src="../../../resource/violation/person.png" height="25" width="25"/></td>
            <td class="picker-img">
                <div id="fileList" class="uploader-list" style="margin-left:1rem; "></div>
                <input type="hidden" name="license" id="license" value="">
                <div id="picker">请点击上传驾驶证照片</div>
            </td>
        </tr>
    </table>
</form>
<button type="submit" id="enroll" class="enroll" >提交</button>
<a href="javascript:history.back(-1)"><button class="return">返回</button></a>

<!--提交确认的弹窗-->
<div id="alertyes">
    <div><span>报名成功</span></div>
   <button id="cancle" style="border-right: 1px solid #dcdcdc;">取消</button>
    <a href="login.html"><button id="define">确定</button></a>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../../resource/js/layer/2.4/layer.js"></script>
<script src="../../../resource/js/webuploader/webuploader.js"></script>
<script>
    <!--图片上传压缩预览-->
    $(function(){
        //文件信息显示区域
        var $list = $('#fileList');
        // 设备像素比
        var ratio = window.devicePixelRatio || 1;
        // 显示的缩略图大小
        var thumbnailWidth = 50 * ratio;
        var thumbnailHeight = 20 * ratio;

        //初始化Web Uploader
        var uploader = WebUploader.create({
            //自动上传
            auto: true,
            //swf文件路径
            swf: '/../../../resource/js/webuploader/Uploader.swf',
            ////文件接收服务端
            server: "/Common/uploadFile",
            //选择文件的按钮。
            pick: "#picker",
            //单次上传最多图片数
            fileNumLimit: 1,
            fileVal: "pic",
            //允许选择的图片格式
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            duplicate :true
        });
        // 当有文件被添加进队列的时候（选择文件后调用）
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>'+
                '</div>'
                ),
                $img = $li.find('img');
            var $btns = $('<div class="file-panel">' + '<span class="cancel" >删除</span>').appendTo($li);
            // $list为容器jQuery实例
            $list.append( $li );
            $btns.on('click', 'span', function () {
                var index = $(this).index();
                switch (index) {
                    case 0:
                        uploader.removeFile(file);
                        removeFile(file);
                        return;
                }
            });
            $("#picker").hide();
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>上传失败</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });


        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file ,response) {
            // console.log(response);
            // console.log(response['data']['pic_url']);
            // console.log("上传完成");
            var license=document.getElementById("license");
            license.value= response['data']['pic_url'];
        });

        // 负责view的销毁
        function removeFile( file ) {
            $("#picker").show();
            var $li = $('#'+file.id);
            $li.off().find('.file-panel').off().end().remove();
        }

    });
    <!--提交的时候验证格式-->
    $(function(){
        $(".return").click(function(){
            $(this).css({'background-color':'#218cd5'});
        });
        $("#enroll").click(function() {
            console.log("点击提交");

            var paizi = $('input[name=car_number]').val();//车牌号
            var Sex = $('input:radio[name="sex"]:checked').val();//性别
            var area = $("#area").val();
            var car_num = area + paizi;
            //照片
            var license= $('input[name=license]').val();
            // console.log(license);

            if (!paizi){
                layer.msg("车牌号不能为空");
                return false;
            }
            if(!(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/.test(car_num))){
                layer.msg("请输入正确的的车牌号");
                return false;
            }

            var user_name = $('input[name=user_name]').val();//姓名
            if (!user_name){
                layer.msg("姓名不能为空");
                return false;
            }

            var phone = $('input[name=phone]').val();//电话号码
            if (!phone){
                layer.msg("电话号码不能为空");
                return false;
            }else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){
                layer.msg("电话号码格式错误，请重新输入");
                $('input[name=phone]').val('');
                return false;
            }

            var  ID_card = $('input[name=ID_card]').val();//身份证号码
            if (!ID_card){
                layer.msg("身份证号码不能为空");
                return false;
            }else if(!(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(ID_card))){
                layer.msg("身份证号码格式错误，请重新输入");
                $('input[name=ID_card]').val('');
                return false;
            }
            // return false;
            console.log("数据请求");
                $.ajax({
                    type:'POST', //请求数据的方式
                    url: "/Violation/addUserInfo", //请求路径
                    data:{
                        user_name:user_name,
                        plate:paizi,
                        phone:phone,
                        id_card:ID_card,
                        gender:Sex,
                        img:license
                    },
                    dataType:'json', //数据类型
                    success:function(e) {
                        console.log(e);
                        if( e.code==200){
                            layer.open({
                                type: 1,
                                title: false,
                                skin: 'layui-layer-demo', //样式类名
                                closeBtn: 0, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                area: ['50%', "auto"],
                                // offset: desth,
                                content: $('#alertyes'),
                            });
                            $("#cancle").click(function () {
                                layer.close(layer.index);
                            })
                        }
                    }
                });
            });

            //上传完成初始化
            $("#cancle").click(function () {
                console.log("点击取消");
                layer.close(layer.index);
            });
    })

</script>
</html>